<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Custom Shape</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Custom Shape</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#mygraphiccontainer {
    position: relative;
    width: 400px;
    height: 300px;
}
</style>
<div class="intro">
<p>
This example shows how to use the <code>Graphics</code> to create a custom shape. Currently, the <code>Graphics</code> module has four shapes:
</p>
<ul>
    <li>rect</li>
    <li>circle</li>
    <li>ellipse</li>
    <li>path</li>
</ul>
<p>
You can also create your own custom shapes. If you need to have reusable shapes, you can do this by extending the <code>Shape</code> class. Once you have created a custom class, you can instantiate it by passing 
a reference of your class in the <code>type</code> attribute of your config to the <code>addShape</code> method. In this example, we will create shape called <code>RoundedRect</code>.
</p>
</div>
<div class="example">
<div id="mygraphiccontainer"></div>
<script>
YUI({filter:"raw"}).use('graphics', function (Y) 
{ 
    var RoundedRect = function()
    {
        RoundedRect.superclass.constructor.apply(this, arguments);
    }
    RoundedRect.NAME = "roundedRect";
    Y.extend(RoundedRect, Y.Shape, {
        _draw: function()
        {
            var w = this.get("width"),
                h = this.get("height"),
                ew = this.get("ellipseWidth"),
                eh = this.get("ellipseHeight");
            this.clear();
            this.moveTo(0, eh);
            this.lineTo(0, h - eh);
            this.quadraticCurveTo(0, h, ew, h);
            this.lineTo(w - ew, h);
            this.quadraticCurveTo(w, h, w, h - eh);
            this.lineTo(w, eh);
            this.quadraticCurveTo(w, 0, w - ew, 0);
            this.lineTo(ew, 0);
            this.quadraticCurveTo(0, 0, 0, eh);
            this.end();
        }
    }, {
        ATTRS: Y.mix({
            ellipseWidth: {
                value: 4
            },

            ellipseHeight: {
                value: 4
            }
        }, Y.Shape.ATTRS)
    }); 
    Y.RoundedRect = RoundedRect;
    
    var mygraphic = new Y.Graphic({render: "#mygraphiccontainer"}),
        myroundrect = mygraphic.addShape({
            type: Y.RoundedRect,
            width: 300,
            height: 200,
            x: 50,
            y: 50,
            ellipseWidth: 12,
            ellipseHeight: 12,
            fill: {
                type: "linear",
                stops: [
                    {color: "#9aa9bb", offset: 0},
                    {color: "#eeefff", offset: 0.4},
                    {color: "#00000f", offset: 0.8},
                    {color: "#9aa9bb", offset: 1}
                ],
                rotation: 45
            },
            stroke: {
                weight: 2,
                color: "#000"
            }
        });
    });
</script>

</div>

<h2>HTML</h2>
<pre class="code prettyprint">&lt;div id=&quot;mygraphiccontainer&quot;&gt;&lt;&#x2F;div&gt;</pre>


<h2>CSS</h2>
<pre class="code prettyprint">#mygraphiccontainer {
    position: relative;
    width: 400px;
    height: 300px;
}</pre>

<h2>JavaScript</h2>

<p>Create a custom class. When creating shapes, add a method called <code>_draw</code>. This is where you will put your drawing logic for the custom shape. You will also need to mix in any attributes that you need.</p>

<pre class="code prettyprint">var RoundedRect = function()
{
    RoundedRect.superclass.constructor.apply(this, arguments);
}
RoundedRect.NAME = &quot;roundedRect&quot;;
Y.extend(RoundedRect, Y.Shape, {
    _draw: function()
    {
        var w = this.get(&quot;width&quot;),
            h = this.get(&quot;height&quot;),
            ew = this.get(&quot;ellipseWidth&quot;),
            eh = this.get(&quot;ellipseHeight&quot;);
        this.clear();
        this.moveTo(0, eh);
        this.lineTo(0, h - eh);
        this.quadraticCurveTo(0, h, ew, h);
        this.lineTo(w - ew, h);
        this.quadraticCurveTo(w, h, w, h - eh);
        this.lineTo(w, eh);
        this.quadraticCurveTo(w, 0, w - ew, 0);
        this.lineTo(ew, 0);
        this.quadraticCurveTo(0, 0, 0, eh);
        this.end();
    }
}, {
    ATTRS: Y.mix({
        ellipseWidth: {
            value: 4
        },

        ellipseHeight: {
            value: 4
        }
    }, Y.Shape.ATTRS)
}); 
Y.RoundedRect = RoundedRect;</pre>

<p>Create a <code>Graphic</code> instance and render it to an <code>HTMLElement</code></p>
<pre class="code prettyprint">var mygraphic = new Y.Graphic({render: &quot;#mygraphiccontainer&quot;}),</pre>


<p>Using the <code>addShape</code> method, add an instance of the custom class to the <code>Graphic</code> instance.</p>

<pre class="code prettyprint">myroundrect = mygraphic.addShape({
    type: Y.RoundedRect,
    width: 300,
    height: 200,
    x: 50,
    y: 50,
    ellipseWidth: 12,
    ellipseHeight: 12,
    fill: {
        type: &quot;linear&quot;,
        stops: [
            {color: &quot;#9aa9bb&quot;, offset: 0},
            {color: &quot;#eeefff&quot;, offset: 0.4},
            {color: &quot;#00000f&quot;, offset: 0.8},
            {color: &quot;#9aa9bb&quot;, offset: 1}
        ],
        rotation: 45
    },
    stroke: {
        weight: 2,
        color: &quot;#000&quot;
    }
});</pre>

<h2>Complete Example Source</h2>
<pre class="code prettyprint">&lt;div id=&quot;mygraphiccontainer&quot;&gt;&lt;&#x2F;div&gt;
&lt;script&gt;
YUI({filter:&quot;raw&quot;}).use(&#x27;graphics&#x27;, function (Y) 
{ 
    var RoundedRect = function()
    {
        RoundedRect.superclass.constructor.apply(this, arguments);
    }
    RoundedRect.NAME = &quot;roundedRect&quot;;
    Y.extend(RoundedRect, Y.Shape, {
        _draw: function()
        {
            var w = this.get(&quot;width&quot;),
                h = this.get(&quot;height&quot;),
                ew = this.get(&quot;ellipseWidth&quot;),
                eh = this.get(&quot;ellipseHeight&quot;);
            this.clear();
            this.moveTo(0, eh);
            this.lineTo(0, h - eh);
            this.quadraticCurveTo(0, h, ew, h);
            this.lineTo(w - ew, h);
            this.quadraticCurveTo(w, h, w, h - eh);
            this.lineTo(w, eh);
            this.quadraticCurveTo(w, 0, w - ew, 0);
            this.lineTo(ew, 0);
            this.quadraticCurveTo(0, 0, 0, eh);
            this.end();
        }
    }, {
        ATTRS: Y.mix({
            ellipseWidth: {
                value: 4
            },

            ellipseHeight: {
                value: 4
            }
        }, Y.Shape.ATTRS)
    }); 
    Y.RoundedRect = RoundedRect;
    
    var mygraphic = new Y.Graphic({render: &quot;#mygraphiccontainer&quot;}),
        myroundrect = mygraphic.addShape({
            type: Y.RoundedRect,
            width: 300,
            height: 200,
            x: 50,
            y: 50,
            ellipseWidth: 12,
            ellipseHeight: 12,
            fill: {
                type: &quot;linear&quot;,
                stops: [
                    {color: &quot;#9aa9bb&quot;, offset: 0},
                    {color: &quot;#eeefff&quot;, offset: 0.4},
                    {color: &quot;#00000f&quot;, offset: 0.8},
                    {color: &quot;#9aa9bb&quot;, offset: 1}
                ],
                rotation: 45
            },
            stroke: {
                weight: 2,
                color: &quot;#000&quot;
            }
        });
    });
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Shows how to create a Graphic instance and add shapes.">
                                        <a href="graphics-simple.html">Basic Graphics Implementation</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to draw lines and polygons.">
                                        <a href="graphics-path.html">Basic Path</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to create linear and radial gradient fills.">
                                        <a href="graphics-gradients.html">Create Gradient Fills</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to add drag to a shape.">
                                        <a href="graphics-drag.html">Basic drag with graphic object</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to apply transforms to shape.">
                                        <a href="graphics-transforms.html">Using Transforms</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows how to use a custom shape with the Graphics module.">
                                        <a href="graphics-customshape.html">Custom Shape</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows to use the graphics api to draw a realistic glass.">
                                        <a href="graphics-muddyglass.html">Transparent Glass with Shadow</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Shows to use the graphics api to draw a violin.">
                                        <a href="graphics-violin.html">Complex Drawing: Violin</a>
                                    </li>
                                
                            
                                
                                    <li data-description="A helper utility for interactively composing path code.">
                                        <a href="graphics-pathutility.html">Path Drawing Utility</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
